<template>
  <slide-view
    v-empty="!canShowDetail"
    :listener-ids="listenerIDs"
    :no-listener-ids="noListenerIDs"
    :no-listener-class="noListenerClass"
    :body-style="{padding: 0, height: '100%'}"
    xs-empty-icon="nopermission"
    :xs-empty-text="$t('crm.visit.e23e047d40963bc6e6a82c588199dbdf')"
    @afterEnter="viewAfterEnter"
    @close="hideView">
    <div ref="crmDetailMain" v-loading="loading" class="detail-main no-padding">
      <flexbox
        v-if="canShowDetail && detailData"
        direction="column"
        align="stretch"
        class="d-container">
        <wk-detail-header
          :subtitle="$t('crm.visit.d8db92d72e5e4e4e425b52e9340ad510')"
          :class="{'is-shadow': bodyIsScroll}"
          :title="detailData.visitNumber"
          :page-list="pageList"
          :dropdowns="handleOperations"
          @command="headerRightClick"
          @pageChange="pageChange"
        >
          <template slot="left">
            <el-tooltip :content="detailData.star == 0 ? '添加关注' : '取消关注'" effect="dark" placement="top">
              <i
                v-if="detailData.star == 0"
                class="el-icon-star-off focus-icon"
                @click="toggleStar()" />
              <i
                v-else
                class="wk wk-focus-on focus-icon active"
                @click="toggleStar()" />
            </el-tooltip>
          </template>
          <template slot="right">
            <time-piece v-if="showTimer && isCall" />
            <el-button
              v-if="showEdit"
              class="head-handle-button"
              type="primary"
              @click="headerRightClick('edit')">
              {{ $t('crm.visit.b56d815b0d3c2141b28403c1176aa447') }}
            </el-button>
          </template>
        </wk-detail-header>

        <!-- 标签 -->
        <flexbox v-if="tagInfo" wrap="wrap" class="wk-tags-content">
          <tag-view :value="tagInfo.value" :max-length="Infinity" wrap="wrap">
            <wk-tag
              v-model="tagInfo.value"
              :disabled="tagInfo.disabled"
              :placeholder="tagInfo.placeholder"
              :data="tagInfo"
              :options="tagInfo.setting"
              @change="tagChange($event)">
              <el-tooltip
                slot="reference"
                :content="$t('crm.visit.aa419f75c0a787ec05085c71b2075f22')"
                effect="dark"
                placement="top">
                <el-button
                  type="icon"
                  size="small"
                  icon="wk wk-icon-label-solid" />
              </el-tooltip>
            </wk-tag>
          </tag-view>
        </flexbox>

        <div class="d-container-body" @scroll="bodyScroll">
          <detail-head-base :list="headDetails" />
          <relative-stage-records
            :id="id"
            :crm-type="crmType"
            :is-stage-flow="true"
            :detail="detailData"
            @handle="detailHeadHandle" />

          <el-tabs v-model="tabCurrentName" nav-mode="more" class="top-padding">
            <el-tab-pane
              v-for="(item, index) in tabNames"
              :key="index"
              :label="item.label"
              :name="item.name"
              lazy>
              <template slot="label">
                <el-badge
                  :value="item.num"
                  :hidden="item.num <= 0"
                  type="primary">
                  {{ item.label }}
                </el-badge>
              </template>
              <component
                :is="item.name"
                :id="id"
                :ref="item.name"
                :detail="detailData"
                :crm-type="crmType"
                @handle="detailHeadHandle" />
            </el-tab-pane>
          </el-tabs>
        </div>
      </flexbox>
    </div>

    <!-- 新建编辑 -->
    <c-r-m-all-create
      v-if="crmCreateShow"
      :action="createActionInfo"
      :crm-type="crmType"
      @save-success="editSaveSuccess"
      @close="crmCreateShow=false" />
  </slide-view>
</template>

<script>
import {
  crmReturnVisitReadAPI,
  crmReturnVisitDeleteAPI
} from '@/api/crm/visit'

import SlideView from '@/components/SlideView'
import RelativeStageRecords from '../components/RelativeStageRecords' // 阶段记录
import CRMEditBaseInfo from '../components/CRMEditBaseInfo' // 产品基本信息
import RelativeFiles from '../components/RelativeFiles' // 相关附件
import RelativeHandle from '../components/RelativeHandle' // 相关操作
import RelativeTeam from '../components/RelativeTeam' // 团队成员

import CRMAllCreate from '../components/CRMAllCreate' // 新建页面
import Sections from '../components/Sections'

import DetailMixin from '../mixins/Detail'

export default {
  name: 'VisitDetail', // 回访详情
  components: {
    SlideView,
    RelativeStageRecords,
    CRMEditBaseInfo,
    RelativeFiles,
    RelativeHandle,
    CRMAllCreate,
    Sections,
    RelativeTeam
  },
  mixins: [DetailMixin],
  props: {
    // 详情信息id
    id: [String, Number],
    // 监听的dom 进行隐藏详情
    listenerIDs: {
      type: Array,
      default: () => {
        return ['crm-main-container']
      }
    },
    // 不监听
    noListenerIDs: {
      type: Array,
      default: () => {
        return []
      }
    },
    noListenerClass: {
      type: Array,
      default: () => {
        return ['el-table__body']
      }
    }
  },
  data() {
    return {
      // 展示加载loading
      loading: false,
      crmType: 'visit',
      headDetails: [],
      tabCurrentName: 'CRMEditBaseInfo'
    }
  },
  computed: {
    // 可操作选项
    handleOperations() {
      return this.getOperations(['delete'])
    },

    // tabs
    tabNames() {
      const tempsTabs = [
        { label: this.$t('crm.visit.bd6109bfcc4031453e8a52869f5ec55f'), name: 'CRMEditBaseInfo' },
        { label: '团队成员', name: 'RelativeTeam', num: this.tabsNumber.memberCount },
        { label: this.$t('crm.visit.e9bc6dd78868336d6746a6111d2927ef'), num: this.tabsNumber.fileCount, name: 'RelativeFiles' }
      ]
      if (this.userInfo.loginType != 3) {
        tempsTabs.push({ label: this.$t('crm.visit.50a318e8249ca4d291acf896ba1deee9'), name: 'RelativeHandle' })
      }
      return tempsTabs
    }
  },
  mounted() {},
  methods: {
    /**
     * 详情
     */
    getDetial() {
      this.loading = true
      crmReturnVisitReadAPI(this.id)
        .then(res => {
          this.loading = false
          const resData = res.data || {}
          this.detailData = resData

          this.headDetails = [
            { title: this.$t('crm.visit.1e85c6efe15e13ce4d5fce3f63dc1364'), value: resData.customerName },
            { title: this.$t('crm.visit.1843458e90b95bcfcbad50b426fb0199'), value: resData.visitTime },
            { title: this.$t('crm.visit.98822df292e651b8f3311c0eb93d645f'), value: resData.ownerUserName, formType: 'user' },
            { title: this.$t('crm.visit.0aec92169a76c04672730c87d09a8cf0'), value: resData.returnVisitType }
          ]
        })
        .catch(() => {
          this.loading = false
          this.hideView()
        })
    },

    /**
     * 关闭
     */
    hideView() {
      this.$emit('hide-view')
    },
    /**
     * 预览图片
     */
    previewImage(list, index) {
      this.$wkPreviewFile.preview({
        index: index,
        data: list
      })
    },

    /* ------------------------ 头部事件 ------------------------ */
    /**
     * @description: 头部右侧点击事件
     * @param {*}
     * @return {*}
     */
    headerRightClick(type) {
      if (type === 'edit') {
        this.createCRMType = this.crmType
        this.createActionInfo = {
          type: 'update',
          id: this.id,
          batchId: this.detailData.batchId
        }
        this.crmCreateShow = true
      } else if (type == 'delete') {
        this.$confirm(
          this.$t('crm.visit.8ccdef946f819a4d6e57bbc85341436e'),
          this.$t('crm.visit.8c649a1c0edf3d238fcdef0a41f154dc'),
          {
            confirmButtonText: this.$t('crm.visit.4223ea3bf26cb7c76657801cbf0ca087'),
            cancelButtonText: this.$t('crm.visit.c09242217070f15b7cc61ae2009e3936'),
            type: 'warning'
          }
        )
          .then(() => {
            crmReturnVisitDeleteAPI([this.id])
              .then(res => {
                this.$message({
                  type: 'success',
                  message: this.$t('crm.visit.52bc342732666de921f2f409a8dc289a')
                })
                this.detailHeadHandle({ type })
              })
              .catch(() => {})
          })
          .catch(() => {})
      }
    }
  }
}
</script>

<style lang="scss" scoped>
@import "../styles/crmdetail.scss";

.d-container-body {
  margin-top: 8px;
}
</style>
